// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView, Dimensions, TouchableOpacity} from 'react-native';
import AllStyle from '../../../../../../style';
import {HeaderTitle} from '../../../../../../componet/settingComponent/HeaderTitle';
import {CardItem} from '../../../../../../componet/settingComponent/CardItem';
import {BottomButton} from '../../../../../../componet/settingComponent/BottomButton';
import {SafeAreaView} from 'react-native-safe-area-context';
import {CardItemSwitch} from '../../../../../../componet/settingComponent/CardItemSwitch';
import {Drawer} from '../../../../../../componet/Drawer';
import DatePicker from 'react-native-date-picker';
import {getDate} from '../../../../../../utils/DateUtils';
import {BrLine} from '../../../../../../componet/settingComponent/BrLine';
import {Toast} from '../../../../../../utils/Toast';

/**
 * @Description:
 * @author TangYong
 * @date 2022/12/19
 */
export class SignPeriod extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            chosenDate: new Date(),
            visible: false,
            headerTitle: this.props.route.params.title,
            choseDateName: '',
            // this.props.route.params.period,
            period:{
                periodId: this.props.route.params.period.periodId!=null?this.props.route.params.period.periodId:null,
                periodStartTime:  this.props.route.params.period.periodStartTime==null?null:this.props.route.params.period.periodStartTime,
                periodEndTime:  this.props.route.params.period.periodEndTime==null?null:this.props.route.params.period.periodEndTime,
                periodStatus:  this.props.route.params.period.periodStatus==null?null:this.props.route.params.period.periodStatus,
                notSignList:  this.props.route.params.period.notSignList==null?null:this.props.route.params.period.notSignList,
                tureSignList:  this.props.route.params.period.tureSignList==null?null:this.props.route.params.period.tureSignList,
            }

        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
        console.log(this.props.route.params)
    }

    componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
       if  ( prevProps.route.params!=this.props.route.params){
           let propsPeriod=this.props.route.params.period
           if (propsPeriod){
               let statePeriod=this.state.period;
               statePeriod.notSignList=propsPeriod.notSignList;
               statePeriod.tureSignList=propsPeriod.tureSignList;
               this.setState({period:statePeriod})
           }
       }

    }

    //方法
    back = () => {
        console.log('back',this.props.route.params);
        let route = {
            name: 'SaveSignPlanGroup',
            params: {
                title: 'SaveSignPlanGroup',
            },
        };
        this.props.navigation.navigate(route);
    };
    goto = (name, params) => {

        const route = {
            name: name,
            params: {
                routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };
    valueChange = () => {

        let period = this.state.period;
        if (period.periodStatus == 1) {
            period.periodStatus = 0;
        } else {
            period.periodStatus = 1;
        }
        this.setState({period});
        // alert(period.periodStatus)
    };
    onOk = () => {
        let choseDateName = this.state.choseDateName;
        let period = this.state.period;
        //console.log(period,choseDateName)
        //console.log(this.state.chosenDate)
        period[choseDateName] = getDate(this.state.chosenDate,'yyyy-MM-dd')+' 00:00:00';
        this.setState({period});
        this.setState({visible: false});
    };
    onCancel = () => {
        this.setState({visible: false});
    };
    setDate = (date) => {
        this.setState({chosenDate: date});
    };
    setChoseDateName = (choseDateName) => {
        this.setState({choseDateName: choseDateName});
        this.setState({visible: true});

    };

    save=()=> {
        let  period =this.state.period;
        if (period.periodStartTime==null||period.periodEndTime==null){
            Toast.showWarning("考勤开始、结束日期不能为空")
            return
        }
        if (period.periodStartTime>=period.periodEndTime){
            Toast.showWarning("考勤结束日期应该在考勤开始日期之后")
            return
        }

        this.goto('SaveSignPlanGroup',{
            title:"保存考勤方案组",
            period:period,
        })

    }

    //DOM
    render() {
        let width = Dimensions.get('window').width;
        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => {
                        this.back();
                    }} headtitle={this.state.headerTitle}
                    />

                    <ScrollView style={AllStyle.padding15}>
                        <View style={AllStyle.card}>
                            <TouchableOpacity onPress={() => this.setChoseDateName('periodStartTime')}>
                                <CardItem title='考勤开始日期'
                                          value={this.state.period.periodStartTime == null ? '未设置' : this.state.period.periodStartTime.substring(0, 10)}></CardItem>
                            </TouchableOpacity>
                            <BrLine></BrLine>
                            <TouchableOpacity onPress={() => this.setChoseDateName('periodEndTime')}>
                                <CardItem title='考勤结束日期'
                                          value={this.state.period.periodEndTime == null ? '未设置' : this.state.period.periodEndTime.substring(0, 10)}></CardItem>
                            </TouchableOpacity>
                            <BrLine></BrLine>
                        </View>
                        <View style={AllStyle.card}>
                            <CardItemSwitch title='法定节假日自动排休' value={this.state.period.periodStatus == 1 ? true : false}
                                            onValueChange={() => this.valueChange()}></CardItemSwitch>
                            <BrLine></BrLine>
                            <TouchableOpacity onPress={()=>{
                                this.goto('SpecialDate',{title: '特殊日期设置',notSignList: this.state.period.notSignList,
                                    tureSignList: this.state.period.tureSignList,})
                            }}>
                                <CardItem title='特殊日期设置' value={''}></CardItem>
                            </TouchableOpacity>
                        </View>


                    </ScrollView>
                    <BottomButton title="确认" click={() => {
                        this.save();
                    }}></BottomButton>
                </View>
                <Drawer visible={this.state.visible} onShow={() => this.onOk()} dismiss={() => this.onCancel()}>
                    <DatePicker
                        style={{width: width}}
                        mode='date'
                        locale="zh_GB"
                        date={this.state.chosenDate}
                        onDateChange={(date) => {
                            this.setDate(date);
                        }}
                    ></DatePicker>
                </Drawer>
            </SafeAreaView>
        );
    }

}

const style = StyleSheet.create({
    //样式
});
